<template>
  <div class="system-role-dialog-container">
    <el-dialog
      :title="state.dialog.title"
      @open="openDialogLs"
      @close="closeDialog"
      v-model="state.dialog.isShowDialog"
      width="769px"
    >
      <div class="el-form-ls">
        <el-form
          class="el-form-new"
          ref="roleDialogFormRef"
          :rules="rules"
          :model="state.ruleForm"
          size="default"
          label-width="140px"
        >
          <el-row :gutter="35">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="申请单名称：" prop="ShenQingDanMingCheng">
                <el-input
                  ref="ShenQingDanMingChengRef"
                  @keydown.enter="ShenQingDanMingChengKeyDown"
                  v-model="state.ruleForm.ShenQingDanMingCheng"
                  placeholder="请输入申请单名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="指引单提示信息：" prop="ZhiYinDanTiShiXinXi">
                <el-input
                  ref="ZhiYinDanTiShiXinXiRef"
                  @keydown.enter="ZhiYinDanTiShiXinXiKeyDown"
                  v-model="state.ruleForm.ZhiYinDanTiShiXinXi"
                  placeholder="请输入指引单提示信息"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="小结文字正常描述：" prop="ZhengChangMiaoShu">
                <el-input
                  ref="ZhengChangMiaoShuRef"
                  @keydown.enter="ZhengChangMiaoShuKeyDown"
                  v-model="state.ruleForm.ZhengChangMiaoShu"
                  placeholder="请输入小结文字正常描述"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="检验性质：" prop="JianYanXingZhi">
                <template #label>
                  <el-tooltip effect="dark" content="请在字典页维护" placement="top-start">
                    <span style="display: flex; align-items: center">
                      检验性质
                      <el-icon><Warning /></el-icon>:
                    </span>
                  </el-tooltip>
                </template>
                <el-select
                  ref="JianYanXingZhiRef"
                  v-model="state.ruleForm.JianYanXingZhi"
                  class="m-2"
                  placeholder="请选择检验性质"
                  clearable
                >
                  <el-option v-for="item in jianYanType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="打印次数：" prop="DaYinCiShu">
                <el-input
                  ref="DaYinCiShuRef"
                  @keydown.enter="DaYinCiShuKeyDown"
                  v-model="state.ruleForm.DaYinCiShu"
                  placeholder="请输入打印次数"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="试管类型：" prop="ShiGuanLeiXing">
                <template #label>
                  <el-tooltip effect="dark" content="请在字典页维护" placement="top-start">
                    <span style="display: flex; align-items: center">
                      试管类型
                      <el-icon><Warning /></el-icon>:
                    </span>
                  </el-tooltip>
                </template>
                <el-input
                  ref="ShiGuanLeiXingRef"
                  @keydown.enter="ShiGuanLeiXingKey"
                  v-model="state.ruleForm.ShiGuanLeiXing"
                  placeholder="请输入试管类型"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="默认检查者：" prop="MoRenJianChaZhe">
                <el-input
                  ref="MoRenJianChaZheRef"
                  @keydown.enter="MoRenJianChaZheKey"
                  v-model="state.ruleForm.MoRenJianChaZhe"
                  placeholder="请输入默认检查者"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="执行组：" prop="ZhiXingZu">
                <template #label>
                  <el-tooltip effect="dark" content="请在字典页维护" placement="top-start">
                    <span style="display: flex; align-items: center">
                      执行组
                      <el-icon><Warning /></el-icon>:
                    </span>
                  </el-tooltip>
                </template>
                <el-input
                  ref="ZhiXingZuRef"
                  @keydown.enter="ZhiXingZuKey"
                  v-model="state.ruleForm.ZhiXingZu"
                  placeholder="请输入执行组"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="默认审核者：" prop="MoRenShenHeZhe">
                <el-input
                  ref="MoRenShenHeZheRef"
                  @keydown.enter="MoRenShenHeZheKey"
                  v-model="state.ruleForm.MoRenShenHeZhe"
                  placeholder="请输入默认审核者"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="所属院区：" prop="SuoShuYuanQu">
                <el-select
                  ref="SuoShuYuanQuRef"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  v-model="state.ruleForm.SuoShuYuanQu"
                  class="m-2"
                  placeholder="请选择所属院区"
                  clearable
                >
                  <el-option v-for="item in yuanQuType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="执行科室名称：" prop="ZhiXingKeShiMingCheng">
                <el-input
                  ref="ZhiXingKeShiMingChengRef"
                  @keydown.enter="ZhiXingKeShiMingChengKey"
                  v-model="state.ruleForm.ZhiXingKeShiMingCheng"
                  placeholder="请输入执行科室名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="设备标识：" prop="SheBeiBiaoShi">
                <el-input
                  ref="SheBeiBiaoShiREF"
                  @keydown.enter="SheBeiBiaoShiKey"
                  v-model="state.ruleForm.SheBeiBiaoShi"
                  placeholder="请输入设备标识"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="检查部位：" prop="JianChaBuWei">
                <el-input
                  ref="JianChaBuWeiRef"
                  @keydown.enter="JianChaBuWeiKey"
                  v-model="state.ruleForm.JianChaBuWei"
                  placeholder="请输入检查部位"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="检查类别：" prop="JianChaLeiBie">
                <el-input
                  ref="JianChaLeiBieRef"
                  @keydown.enter="JianChaLeiBieKey"
                  v-model="state.ruleForm.JianChaLeiBie"
                  placeholder="请输入检查类别"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注1：" prop="BeiZhu1">
                <el-input
                  ref="BeiZhu1Ref"
                  @keydown.enter="BeiZhu1Key"
                  v-model="state.ruleForm.BeiZhu1"
                  placeholder="请输入备注1"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注2：" prop="BeiZhu2">
                <el-input
                  ref="BeiZhu2Ref"
                  @keydown.enter="BeiZhu2Key"
                  v-model="state.ruleForm.BeiZhu2"
                  placeholder="请输入备注2"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注3：" prop="BeiZhu3">
                <el-input ref="BeiZhu3Ref" v-model="state.ruleForm.BeiZhu3" placeholder="请输入备注3" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { GetJianYanXingZhiSel, PostShenQingDanAdd, PutShenSingDanUpdate } from "@/api/modules/integratedProject";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { ElMessage } from "element-plus";
import { deepCopy, useFocusInput } from "@/utils";
import { GetAllYuanQuSel } from "@/api/modules/pulbic";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

const rules = reactive({
  ShenQingDanMingCheng: [{ required: true, message: "请填写申请单名称" }],
  SuoShuYuanQu: [{ required: true, message: "请选择所属院区" }]
});

// 定义变量内容
const roleDialogFormRef = ref<any>();
const state = ref<any>({
  ruleForm: {},
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});
const yuanQuType = ref<any>([]);
const hospitalLs = () => {
  GetAllYuanQuSel().then((res: any) => {
    yuanQuType.value = [];
    res.Data?.map((item: string) => {
      let objLs = {
        value: item,
        label: item
      };
      yuanQuType.value.push(objLs);
    });
    if (state.value.dialog.type === "add") {
      state.value.ruleForm.SuoShuYuanQu = [];
      state.value.ruleForm.SuoShuYuanQu = yuanQuType.value.map((item: any) => item.value);
    }
  });
};
const jianYanType = ref<any>([]);
const jianYanXingZhi = () => {
  GetJianYanXingZhiSel().then((res: any) => {
    jianYanType.value = [];
    res.Data.map(item => {
      let objLs = {
        value: item.ZiDianZhiNeiRong,
        label: item.ZiDianZhiNeiRong
      };
      jianYanType.value.push(objLs);
    });
  });
};
const convertStringToArray = str => {
  let arr = str.split(";");
  arr = arr.map(item => item.trim());
  arr = arr.filter(item => {
    // 过滤掉空字符串
    if (item === "") return false;
    return !/^\s*$/.test(item);
  });
  return arr;
};

// 打开弹窗
const openDialog = (type: string, row: any) => {
  state.value.dialog.isShowDialog = true;
  nextTick(() => {
    hospitalLs();
    jianYanXingZhi();
    if (type === "edit") {
      state.value.ruleForm = deepCopy(row);
      state.value.dialog.title = "修改申请单";
      state.value.dialog.submitTxt = "确 定";
      state.value.ruleForm.SuoShuYuanQu = convertStringToArray(state.value.ruleForm.SuoShuYuanQu);
    } else {
      state.value.dialog.title = "新增申请单";
      state.value.dialog.submitTxt = "确 定";
      state.value.dialog.type = "add";
      state.value.ruleForm.DaYinCiShu = 1;
      state.value.ruleForm.ZhengChangMiaoShu = "未见明显异常";
    }
  });
};
// 关闭弹窗
const closeDialog = () => {
  state.value.dialog.isShowDialog = false;
  // nextTick(() => {
  roleDialogFormRef.value.resetFields();
  // });
  emit("refresh");
};
// 取消
const onCancel = () => {
  closeDialog();
};
const returnObj = () => {
  return {
    ...state.value.ruleForm,
    KeShiID: useIntegratedProject().keShiId,
    SuoShuYuanQu: state.value.ruleForm.SuoShuYuanQu.join(";"),
    ZhiYinDanTiShiXinXi: state.value.ruleForm.ZhiYinDanTiShiXinXi ? state.value.ruleForm.ZhiYinDanTiShiXinXi : "",
    ZhengChangMiaoShu: state.value.ruleForm.ZhengChangMiaoShu ? state.value.ruleForm.ZhengChangMiaoShu : "",
    JianYanXingZhi: state.value.ruleForm.JianYanXingZhi ? state.value.ruleForm.JianYanXingZhi : "",
    DaYinCiShu: state.value.ruleForm.DaYinCiShu ? +state.value.ruleForm.DaYinCiShu : "",
    ShiGuanLeiXing: state.value.ruleForm.ShiGuanLeiXing ? state.value.ruleForm.ShiGuanLeiXing : "",
    MoRenJianChaZhe: state.value.ruleForm.MoRenJianChaZhe ? state.value.ruleForm.MoRenJianChaZhe : "",
    ZhiXingZu: state.value.ruleForm.ZhiXingZu ? state.value.ruleForm.ZhiXingZu : "",
    MoRenShenHeZhe: state.value.ruleForm.MoRenShenHeZhe ? state.value.ruleForm.MoRenShenHeZhe : "",
    ZhiXingKeShiMingCheng: state.value.ruleForm.ZhiXingKeShiMingCheng ? state.value.ruleForm.ZhiXingKeShiMingCheng : "",
    SheBeiBiaoShi: state.value.ruleForm.SheBeiBiaoShi ? state.value.ruleForm.SheBeiBiaoShi : "",
    JianChaBuWei: state.value.ruleForm.JianChaBuWei ? state.value.ruleForm.JianChaBuWei : "",
    JianChaLeiBie: state.value.ruleForm.JianChaLeiBie ? state.value.ruleForm.JianChaLeiBie : "",
    BeiZhu1: state.value.ruleForm.BeiZhu1 ? state.value.ruleForm.BeiZhu1 : "",
    BeiZhu2: state.value.ruleForm.BeiZhu1 ? state.value.ruleForm.BeiZhu2 : "",
    BeiZhu3: state.value.ruleForm.BeiZhu3 ? state.value.ruleForm.BeiZhu3 : ""
  };
};
const onSubmit = () => {
  roleDialogFormRef.value!.validate(async valid => {
    if (!valid) return;
    if (state.value.dialog.type === "add") {
      //   提交的
      PostShenQingDanAdd(returnObj()).then((res: any) => {
        if (res.Success === 0) {
          console.log(res, "新增成功");
          //
          ElMessage.success({ message: `${state.value.dialog.title}成功！` });
          closeDialog();
          emit("refresh");
        }
      });
      emit("refresh");
    } else {
      let obj = {
        ...state.value.ruleForm,
        ...returnObj(),
        ShenQingDanID: state.value.ruleForm.ShenQingDanID
      };
      PutShenSingDanUpdate(obj).then((res: any) => {
        if (res.Success === 0) {
          console.log(res, "修改成功");
          //
          ElMessage.success({ message: `${state.value.dialog.title}成功！` });
          closeDialog();
          emit("refresh");
        }
      });
    }
  });
};
const ShenQingDanMingChengRef = ref();
const openDialogLs = () => {
  nextTick(() => {
    if (ShenQingDanMingChengRef.value) {
      ShenQingDanMingChengRef.value.focus();
    }
  });
};
const [ZhiYinDanTiShiXinXiRef, ShenQingDanMingChengKeyDown] = useFocusInput();
const [ZhengChangMiaoShuRef, ZhiYinDanTiShiXinXiKeyDown] = useFocusInput();
const [JianYanXingZhiRef, ZhengChangMiaoShuKeyDown] = useFocusInput();
const [ShiGuanLeiXingRef, DaYinCiShuKeyDown] = useFocusInput();
const [MoRenJianChaZheRef, ShiGuanLeiXingKey] = useFocusInput();
const [ZhiXingZuRef, MoRenJianChaZheKey] = useFocusInput();
const [MoRenShenHeZheRef, ZhiXingZuKey] = useFocusInput();
const [SuoShuYuanQuRef, MoRenShenHeZheKey] = useFocusInput();
const [SheBeiBiaoShiREF, ZhiXingKeShiMingChengKey] = useFocusInput();
const [JianChaBuWeiRef, SheBeiBiaoShiKey] = useFocusInput();
const [JianChaLeiBieRef, JianChaBuWeiKey] = useFocusInput();
const [BeiZhu1Ref, JianChaLeiBieKey] = useFocusInput();
const [BeiZhu2Ref, BeiZhu1Key] = useFocusInput();
const [BeiZhu3Ref, BeiZhu2Key] = useFocusInput();

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
  .el-form-ls {
    height: 50vh;
    overflow: scroll;
    .el-form-new {
      height: 100%;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
